<script>
export default {
  name: "FormExamplePage",
  data(){
    return{
      data: {
        username: null,
        password: null,
        major: null,
        sex: null,
        date: null,
      },
        rules:{
          username:[
            {required: true,message:'用户名不能为空',trigger:'blur'}
          ]
        }



    }
  }
}
</script>

<template>
<div>
  <el-card style="width: 600px;margin: 20px auto">
    <div slot="header">
    <span>卡片</span>
    </div>
    <div>
      <el-form :rules="rules" :model="data">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder=" 请输入用户名" v-model="data.username"/>
        </el-form-item>
        <el-form-item label = "密码">
          <el-input type="password" show-password placeholder="请输入密码"  v-model="password" />
        </el-form-item>
        <el-form-item label="专业">
          <el-select v-model="major" style="width: 100%">
            <el-option label="软件工程" value="1"/>
            <el-option label="信息安全" value="2"/>
            <el-option label="计算机科学与技术" value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="sex">
            <el-radio label="Male">男</el-radio>
            <el-radio label="Female">女</el-radio>
          </el-radio-group>

        </el-form-item>
        <el-date-picker style="width: 100%"
                        type="date"
                        value-format="yyyy-MM-dd"
                        v-model="date">
        </el-date-picker>
        <el-form-item style="margin: 40px">
          <el-button type="primary">提交</el-button>
           <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>

</template>

<style scoped>

</style>